<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签页Nav</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--
        	作者：zxy
        	时间：2019-07-28
        	描述：当切换标签页时，连带着内容一起切换
        -->
        <div class="container">
        	<ul id="myTab" class="nav nav-tabs">   <!--用来说明这个要跳转-->
        		<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        		<li><a href="#profile" data-toggle="tab">profile</a></li>
        		<li class="dropdown">
        			<a href="#" id="myTabdrop1" class="dropdown-toggle" 
        				data-toggle="dropdown">
        				下拉菜单
        				<span class="caret"></span>
        			</a>
        			<ul class="dropdown-menu" role="menu"> 
        				<li><a href="#one" tabindex="-1" data-toggle="tab">one</a></li>
        				<li><a href="#two" tabindex="-1" data-toggle="tab">two</a></li>
        				
        			</ul>
        		</li>
        	</ul>
        </div>
        <div id="MyTabContent" class="tab-content">
        	<div class="tab-pane container fade in active" id="home">
        		<p>Hello 你好吗欢迎来到德玛西亚</p>
        		<p>Hello 你好吗欢迎来到德玛西亚</p>
        		<p>Hello 你好吗欢迎来到德玛西亚</p>
        		<p>Hello 你好吗欢迎来到德玛西亚</p>
        	</div>
        	<div class="tab-pane container fade" id="profile">
        		<p>Hello 你好吗欢迎来到德玛西亚22</p>
        		<p>Hello 你好吗欢迎来到德玛西亚22222</p>
        		<p>Hello 你好吗欢迎来到德玛西亚2</p>
        		<p>Hello 你好吗欢迎来到德玛西亚222</p>
        	</div>
        	<div class="tab-pane container fade" id="one">
        		<p>Hello 你好吗欢迎来到德玛西亚22dropone</p>
        		<p>Hello 你好吗欢迎来到德玛西亚22dropone</p>
        		<p>Hello 你好吗欢迎来到德玛西亚2dropone</p>
        		<p>Hello 你好吗欢迎来到德玛西亚2dropone</p>
        	</div>
        	<div class="tab-pane container " id="two">
        		<p>Hello 你好吗欢迎来到德玛西亚22droptwodroptwo</p>
        		<p>Hello 你好吗欢迎来到德玛西亚22droptwodroptwo</p>
        		<p>Hello 你好吗欢迎来到德玛西亚2droptwodroptwo</p>
        		<p>Hello 你好吗欢迎来到德玛西亚2droptwodroptwo</p>
        	</div>
        </div>
        
        <script>
        	/*$("#myTab a:last").tab("show");*//*默认显示最后一个*/
        	$("#myTab li:eq(0) a").tab("show");//显示第一个,从零开始
        	$('a[data-toggle="tab"]').on("shown.bs.tab",function(e){
        		alert("切换了");
        	})
        </script>
	</body>
</html>
